
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { AssessmentResult } from "@/types/profile";

const assessmentResults: AssessmentResult[] = [
  {
    title: "Learning Style",
    date: "April 20, 2025",
    result: "Visual Learner",
    description: "You learn best through visual aids, diagrams, and charts. Try using these tools to enhance your study sessions."
  },
  {
    title: "Team Role",
    date: "April 22, 2025",
    result: "Creative Contributor",
    description: "You excel at generating innovative ideas and solutions. Your creative perspective is valuable in group settings."
  }
];

export const AssessmentResults = () => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Your Assessment Results</CardTitle>
        <CardDescription>
          Review insights from assessments you've completed
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-6">
          {assessmentResults.map((assessment, index) => (
            <div key={index} className="border-b border-border pb-4 mb-4 last:border-0">
              <div className="flex justify-between items-start mb-2">
                <h3 className="font-semibold text-lg">{assessment.title}</h3>
                <span className="text-xs text-muted-foreground">{assessment.date}</span>
              </div>
              <div className="bg-accent p-3 rounded-md mb-2">
                <span className="font-medium">{assessment.result}</span>
              </div>
              <p className="text-sm text-muted-foreground">{assessment.description}</p>
            </div>
          ))}
          
          <div className="text-center pt-4">
            <Button asChild variant="outline">
              <a href="/discover">Take More Assessments</a>
            </Button>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};
